<template>
		<view class="goods-item" v-if="item.goods_small_logo || defaultImgUrl ">
			<view class="goods-item-left">
				<radio :checked="item.goods_status"  color="#FF0000" v-if="showRadio" @click="radioClickHandler" />
				<image :src="item.goods_small_logo || defaultImgUrl " :onerror="defaultImgUrl"></image>
			</view>
			<view class="goods-item-right">
				 <text class="goods-title">{{item.goods_name}}</text>
				 <view class="goods-info-box">
						<view class="goods-price">{{item.goods_price | formatPrice}}</view>
						<view class="number-box" v-if="showNum">
									<uni-section title="基本用法" type="line" padding>
										<uni-number-box @change="changeValue" background="#ffffff" min=1 :value="item.goods_count"  />
									</uni-section>
						</view>
				 </view>
			</view>
		</view>
</template>

<script>
	export default {
		name:"my-goods",
		props:{
			item:{
			type:Object,
			default:{
				
				}
			},
			
			showRadio:{
				type:Boolean,
				default:false
			},
			
			showNum:{
				type:Boolean,
				default:false
			}
		
		},
		data(){
			return{
				defaultImgUrl:'http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000191938678_1_200x200.jpg',
			}
		},
		filters:{
			formatPrice(val){
				return '¥'+val.toFixed(2)
			}
		},
		methods:{
			
			radioClickHandler(){
				this.$emit('radio-change',{
					goods_id:this.item.goods_id,
				  goods_status:!this.item.goods_status,
				})
			},
			
			changeValue(value) {
				this.$emit('changeNumHandler',{
					goods_id:this.item.goods_id,
					goods_count:value - 0
					})
			},
		}
		
	}
</script>

<style lang="scss">
	.goods-item{
		display: flex;
		padding: 10px 5px;
		border-bottom: 1px solid #d3d3d3;
		.goods-item-left{
			display: flex;
				align-items: center;
			margin-right: 10px;
			image{
				width: 100px;
				height: 100px;
			}
		}
		
		.goods-item-right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex-grow: 1;
			.goods-title{
				   overflow: hidden;
				    text-overflow: ellipsis;
				    display: -webkit-box;
				    -webkit-line-clamp: 3;
				    -webkit-box-orient: vertical;
						font-size: 14px;
			}
			.goods-info-box{
				display: flex;
				justify-content: space-between;
				margin-right: 10px;
				.goods-price{
					color:#F00000 ;
					font-weight: bold;
				}
			}
			
		}
	}
</style>